<script setup>
import { useTokenStore } from '@/stores/token'
import {getDormitoryList} from '@/api/dormitory'
import { ref } from 'vue'
const tokenStore = useTokenStore()
const dormitory = ref({})
const dormitoryInfo = async () => {
    const dormId = tokenStore.studentInfo.dormId
    const res = await getDormitoryList(dormId)
    dormitory.value = res.data
    console.log(res) 
}
dormitoryInfo()
</script>

<template>
  <div class="home-container">
    <header>
      <h1>欢迎使用智慧宿舍管理系统</h1>
    </header>
    <main>
      <div class="info-card">
        <div class="welcome-message">
          <p>您好{{tokenStore.studentInfo.username}}，欢迎回来！</p>
        </div>
        <div class="dormitory-info">
          <h2>宿舍信息</h2>
          <p>类型: {{dormitory.dormType}}</p>
          <p>楼栋: {{dormitory.building}}</p>
          <p>楼层: {{dormitory.floor}}</p>
          <p>宿舍号: {{dormitory.dormNumber}}</p>
          <p>床号: {{tokenStore.studentInfo.bedNumber}}号</p>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.home-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
    padding: 20px;
    background-color: #f0f8ff;
}

header {
    background-color: #3b5998;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
}

main {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.info-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.welcome-message, .dormitory-info {
    padding: 10px;
    text-align: center;
}

h1, h2 {
    margin: 0;
    font-size: 24px;
}

p {
    margin-top: 10px;
    color: #333;
    font-size: 16px;
}
</style>